forum_type
<template>
  <el-main class="bg table_wrap auth">
    <!-- table头部检索 -->
    <div class="div-form">
      <el-form
        ref="elFormRef"
        :model="formInline"
        label-width="90px"
        :style="{ width: '100%' }"
        label-position="left"
      >
        <el-row class="rows row1">
          <el-col :xs="24" :sm="24" :lg="8" class="el_form_search_wrap">
            <el-form-item label="权限名">
              <el-input v-model="formInline.mod_name"></el-input>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="24" :lg="8" class="el_form_search_wrap">
            <el-form-item label="用户组">
              <el-select v-model="formInline.user_group">
                <el-option
                  v-for="(o, i) in list_user_group"
                  :label="o.name"
                  :value="o.name"
                  :key="i"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="24" :lg="8" class="el_form_search_wrap">
            <el-form-item label="添加权限">
              <el-select v-model="formInline.add">
                <el-option value="" :key="-1" label=""></el-option>
                <el-option
                  v-for="(o, i) in list_state"
                  :value="o.value"
                  :label="o.name"
                  :key="i"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="24" :lg="8" class="el_form_search_wrap">
            <el-form-item label="修改权限">
              <el-select v-model="formInline.set">
                <el-option value="" :key="-1" label=""></el-option>
                <el-option
                  v-for="(o, i) in list_state"
                  :value="o.value"
                  :label="o.name"
                  :key="i"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="24" :lg="8" class="el_form_search_wrap">
            <el-form-item label="删除权限">
              <el-select v-model="formInline.del">
                <el-option value="" :key="-1" label=""></el-option>
                <el-option
                  v-for="(o, i) in list_state"
                  :value="o.value"
                  :label="o.name"
                  :key="i"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="24" :lg="8" class="el_form_search_wrap">
            <el-form-item label="查询权限">
              <el-select v-model="formInline.get">
                <el-option value="" :key="-1" label=""></el-option>
                <el-option
                  v-for="(o, i) in list_state"
                  :value="o.value"
                  :label="o.name"
                  :key="i"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <baseTable
      :tableColumns="columns"
      :requestApi="url_get_list"
      :isShowSelect="false"
      :imgflag="false"
      :vm="vm" 
      :isShowOptColumn="true"
      v-model:isRefresh="isRefresh"
      :otherParams="formInline"
      @handleSelectionChange="handleSelectionChange"
      @handleCurrentChangeNew="handleCurrentChangeNew"
    >
      <!-- 头部按钮 -->
      <template #baseHeadFunt>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button @click="onReset(true)">重置</el-button>
      </template>
      <!-- table内操作 -->
      <template #baseTableFunt="{ scope }">
        <el-button
        v-if="scope.row.user_group != '管理员'"
          type="primary"
          size="small"
          @click="router.push('./view?' + field + '=' + scope.row[field])"
          >修改</el-button
        >
      </template>
      <template #baseTableFunt2="{ scope }">
        <el-button
        v-if="scope.user_group != '管理员'"
          type="primary"
          size="small"
          @click="router.push('./view?' + field + '=' + scope[field])"
          >修改</el-button
        >
      </template>
      <!-- 特殊表格内容 -->
      <template #tableContent="{ scope, column }">
        <span v-if="column.prop === 'mod_name'">
          <span
            v-if="
              scope.row.path.replace('/' + scope.row.table_name + '/', '') ==
              'table'
            "
            >{{ scope.row.mod_name + "后台列表" }}</span
          >
          <span
            v-if="
              scope.row.path.replace('/' + scope.row.table_name + '/', '') ==
              'view'
            "
            >{{ scope.row.mod_name + "后台详情" }}</span
          >
          <span
            v-if="
              scope.row.path.replace('/' + scope.row.table_name + '/', '') ==
              'list'
            "
            >{{ scope.row.mod_name + "前台列表" }}</span
          >
          <span
            v-if="
              scope.row.path.replace('/' + scope.row.table_name + '/', '') ==
              'details'
            "
            >{{ scope.row.mod_name + "前台详情" }}</span
          >
          <span
            v-if="
              scope.row.path.replace('/' + scope.row.table_name + '/', '') ==
              'edit'
            "
            >{{ scope.row.mod_name + "前台编辑" }}</span
          >
        </span>
        <span v-if="column.prop === 'add'">{{ scope.row.add ? "有" : "无" }}</span>
        <span v-if="column.prop === 'set'">{{ scope.row.set ? "有" : "无" }}</span>
        <span v-if="column.prop === 'del'"> {{ scope.row.del ? "有" : "无" }}</span>
        <span v-if="column.prop === 'get'">{{ scope.row.get ? "有" : "无" }}</span>
        <span v-if="column.prop === 'update_time'">{{
          formatDate(scope.row.update_time)
        }}</span>
        <span v-if="column.prop === 'create_time'">{{
          formatDate(scope.row.create_time)
        }}</span>
      </template>
      <template #tableContent2="{ scope, column }">
        <span v-if="column.prop === 'mod_name'">
          <span
            v-if="
              scope.path.replace('/' + scope.table_name + '/', '') ==
              'table'
            "
            >{{ column.label }}： {{ scope.mod_name + "后台列表" }}</span
          >
          <span
            v-if="
              scope.path.replace('/' + scope.table_name + '/', '') ==
              'view'
            "
            >{{ column.label }}： {{ scope.mod_name + "后台详情" }}</span
          >
          <span
            v-if="
              scope.path.replace('/' + scope.table_name + '/', '') ==
              'list'
            "
            >{{ column.label }}： {{ scope.mod_name + "前台列表" }}</span
          >
          <span
            v-if="
              scope.path.replace('/' + scope.table_name + '/', '') ==
              'details'
            "
            >{{ column.label }}： {{ scope.mod_name + "前台详情" }}</span
          >
          <span
            v-if="
              scope.path.replace('/' + scope.table_name + '/', '') ==
              'edit'
            "
            >{{ column.label }}： {{ scope.mod_name + "前台编辑" }}</span
          >
        </span>
        <span v-if="column.prop === 'add'">{{ column.label }}：{{ scope.add ? "有" : "无" }}</span>
        <span v-if="column.prop === 'set'">{{ column.label }}：{{ scope.set ? "有" : "无" }}</span>
        <span v-if="column.prop === 'del'">{{ column.label }}： {{ scope.del ? "有" : "无" }}</span>
        <span v-if="column.prop === 'get'">{{ column.label }}：{{ scope.get ? "有" : "无" }}</span>
        <span v-if="column.prop === 'update_time'">{{ column.label }}： {{
          formatDate(scope.update_time)
        }}</span>
        <span v-if="column.prop === 'create_time'">{{ column.label }}： {{
          formatDate(scope.create_time)
        }}</span>
      </template>
    </baseTable>
  </el-main>
</template>
<script setup>
import { useRouter } from "vue-router";
import {formatDate} from "@/utils/utils.js";
import { $post, $get } from "@/api/Api.js";
import { ElMessage } from "element-plus";
import { ref,  onMounted } from "vue";
import storageHelper from "@/libs/StorageHelper";
let router = useRouter();
let table = ref("auth");
let field = ref("auth_id");
let url_get_list = ref("/api/auth/get_list");
let url_del = ref("/api/auth/del?");
let user_group = storageHelper.getUserInfo().user_group;
// 头部搜索// 搜索
let list_state = ref([
  {
    name: "无",
    value: "0",
  },
  {
    name: "有",
    value: "1",
  },
]);
let list_user_group = ref([]);
let formInline = ref({
  mod_name: "",
  user_group: "",
  add: "",
  set: "",
  del: "",
  get: "",
});
let vm=ref({
  id: "auth_id",
})
// 列名
const columns = [
  { prop: "user_group", label: "用户组" },
  { prop: "mod_name", label: "权限名称" },
  { prop: "add", label: "添加权限" },
  { prop: "set", label: "修改权限" },
  { prop: "del", label: "删除权限" },
  { prop: "get", label: "查询权限" },
  { prop: "create_time", label: "创建时间" },
  { prop: "update_time", label: "更新时间" },
];
// 刷新table
let isRefresh = ref(false);
//批量勾选数据
let selectList = ref([]);
//点击当前行数据
let currentRowTableProduct = ref({});
//表格勾选回调
let handleSelectionChange = (val) => {
  selectList.value = val.map((item) => {
    return item.auth_id;
  });
};
//点击当前行
let handleCurrentChangeNew = (val) => {
  currentRowTableProduct.value = val;
};
// 批量删除
let delInfo = () => {
  ElMessageBox.confirm("此操作将永久删除该文件, 是否继续?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      selectList.value.map((item) => {
        delFun(item);
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消操作",
      });
    });
};

// 调用删除方法
let delFun = (id) => {
  $get(url_del.value + "auth_id=" + id).then((json) => {
    if (json.result) {
      ElMessage.success("删除成功");
    } else if (json.error) {
      ElMessage.error(json.error);
    }
    isRefresh.value = true;
  });
};

let table_class = ({ row, column, rowIndex, columnIndex }) => {
  return "table_class";
};

// 搜索
let onSubmit = () => {
  isRefresh.value = true;
};

// 重置table检索
let onReset = (refresh) => {
  formInline.value = {
    mod_name: "",
    user_group: "",
    add: "",
    set: "",
    del: "",
    get: "",
  };
  isRefresh.value = refresh;
};

// 获取用户组
let get_list_user_group = async () => {
  let json = await $get("/api/user_group/get_list");
  if (json.result) {
    list_user_group.value = json.result.list;
  } else if (json.error) {
    console.error(json.error);
  }
};
onMounted(() => {
  get_list_user_group();
});
</script>
<style lang="less" scoped>
.div-form {
  padding: 10px;
}
</style>
